import React from "react";
import Reflux from "reflux";
import {Col, Row} from "antd";
import {LdhDetailPage, LdhFieldSet} from "@biz/PageCompnents";
import {Message, LdhTable, LdhButton} from "@biz/Components";
import GUtils from "@/utils";

import {createAction} from "../Action";
import Config from "../config";
import Store from "../Store";
const prefix = "order-detail";
import "../../biz/style.less"
import RefundModal from "./RefundModal";

export default class RechargeOrderDetail extends Reflux.Component {

    constructor(props) {
        super(props);
        this.action = createAction();
        this.config = Config(this.action);
        this.store = new Store(props, this.config, this.action);
        this.className = prefix;
    }

    componentDidMount() {
        let id = GUtils.getQueryString("id");
        if (!id) {
            Message.error("参数非法！");
            this.setState({detailStatus: "view"});
            return;
        }
        this.action.getDetail(id,(detail)=>{
            detail.feeList = [{name:"售价", amount:detail.payAmount}]

            // 退款
            if(detail.status==4){
                let {refundAmount,balanceRefundAmount, refundTime, refundReason} = detail;
                detail.refundList=[{amount:refundAmount,balanceAmount:balanceRefundAmount, time:refundTime, reason:refundReason}]
            }

        });
    }

    renderRow(f1, v1, f2, v2){
        return  <Row gutter={20} className="value-row">
            <Col flex="200px">{f1} </Col>
            <Col span={6}>{v1} </Col>
            <Col flex="120px">{f2}</Col>
            <Col span={6}>{v2} </Col>
        </Row>
    }

    render() {
        let {loading, detail={}} = this.state;
        let o = detail;
        let canRefund = 2 == o.status;
        return <LdhDetailPage className={this.className}>
            <LdhFieldSet title="余额充值" loading={loading}custom={canRefund && <LdhButton type="primary" onClick={this.action.preRefund}>退款</LdhButton>}>
                {this.renderRow("订单号", o.orderNo, "订单状态", GUtils.renderRechargeOrderStatus(o.status))}
                {this.renderRow("用户昵称", o.userNickname, "下单时间", GUtils.dateFormatter(o.createTime))}
                {this.renderRow("用户手机号", o.userPhone, "规格名称", o.productName)}
                {this.renderRow("用户uid", (o.userId+"").padStart(6, '0'), "余额价值", o.balanceAmount)}
                {this.renderRow("备注", o.notes, "赠送余额", o.giftAmount)}

            </LdhFieldSet>

            <LdhFieldSet title="订单费用明细" loading={loading}>
                <LdhTable loading={loading} columns={feeColumns} rowKey="name" dataSource={o.feeList} pagination={false} scroll={false}/>
                <div className="pay-value">
                    实付 ￥ <span>{o.payAmount}</span>
                </div>
            </LdhFieldSet>

            <LdhFieldSet title="退款记录" loading={loading}>
                <LdhTable loading={loading} columns={refundColumns} rowKey="name" dataSource={o.refundList} pagination={false} scroll={false}/>

            </LdhFieldSet>

            <LdhFieldSet title="交易记录" loading={loading}>
                <LdhTable loading={loading} columns={transactionColumns} rowKey="name" dataSource={o.payInfoList} pagination={false} scroll={false}/>

            </LdhFieldSet>

            <RefundModal action={this.action} store={this.state} onSubmitCallback={this.componentDidMount.bind(this)}/>
        </LdhDetailPage>
    }


}

const feeColumns =[
    {title:"费用类型",dataIndex:"name",width:200},
    {title:"金额",dataIndex:"amount",width:200},
    {title:"合计",dataIndex:"amount",width:200},
]

const refundColumns =[
    {title:"时间",dataIndex:"time",width:200, render:v=>GUtils.dateTimeFormatter(v)},
    {title:"原因",dataIndex:"reason",width:200},
    {title:"微信退款金额",dataIndex:"amount",width:200},
    {title:"余额退款金额",dataIndex:"balanceAmount",width:200},
]

const transactionColumns =[
    {title:"商户号",dataIndex:"mchId",width:200},
    {title:"交易号",dataIndex:"transactionId",width:200},
    {title:"支付时间",dataIndex:"payTime",width:200, render:v=>GUtils.dateTimeFormatter(v)},
    {title:"支付金额",dataIndex:"amount",width:200},
]